import React, { Component } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import { Form } from '@ant-design/compatible';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
  Modal,
  Row,
  Col,
  Input,
  Button,
  Table,
} from 'antd';

import '@ant-design/compatible/assets/index.css';

interface SaveLogisticsProps extends FormComponentProps {
  dispatch?: Dispatch | any;
  visible: boolean;
  state?: { id: any };
  expressValues: any;
  expressInfo?: any;
  setExpress?: any;
  loading?: boolean;
  changeModal: (visible: boolean) => void;
}

interface SaveLogisticsState {
  searchValues: any;
  pageIndex: number;
  pageSize: number;
  selectedRowKeys: number[];
}

function mapStateToProps(state: any) {
  const {
    expressInfoList: { setExpress },
    loading,
  } = state;

  return ({
    setExpress,
    loading: loading.effects['expressInfoList/fetchLogistics'],
  });
}

@connect(mapStateToProps)
class SaveLogisticsElem extends Component<SaveLogisticsProps, SaveLogisticsState> {
  columns = [
    { title: '快递公司', dataIndex: 'name' },
    { title: '固定电话', dataIndex: 'telephone' },
    { title: '创建时间', dataIndex: 'createTime' },
    { title: '创建人', dataIndex: 'createUserName' },
  ];

  state: SaveLogisticsState = {
    searchValues: { name: '' },
    pageIndex: 1,
    pageSize: 5,
    selectedRowKeys: [],
  }

  handleSearch = (e: React.FormEvent) => {
    e.preventDefault();

    const { form: { validateFields } } = this.props;
    validateFields((errors, { name }) => {
      if (errors) return;

      const params = {
        name,
        pageIndex: 1,
        pageSize: 5,
        status: 1,
      };

      this.setState({
        pageIndex: 1,
        pageSize: 5,
      }, () => this.fetchAction('fetchLogistics', params));
    });
  }

  handleSubmit = () => {
    const {
      state: { id = 0 },
      expressValues: search,
    }: any = this.props;
    const { selectedRowKeys } = this.state;
    const expressIdList = selectedRowKeys.join(',');
    const params = {
      search,
      expressIdList,
      logisId: id,
    };
    this.fetchAction('saveExpress', params);

    this.handleCencel();
  }

  handleCencel = () => {
    this.setState({
      searchValues: { name: '' },
      pageIndex: 1,
      pageSize: 5,
      selectedRowKeys: [],
    }, () => {
      const { changeModal } = this.props;
      changeModal(false);
    });
  }

  handleSelectTableItem = (selectedRowKeys: any) => {
    this.setState({ selectedRowKeys });
  }

  onSelectChange = (pageIndex: number, pageSize: number) => {
    const { searchValues } = this.state;
    const new_searchValues = {
      ...searchValues,
      pageIndex,
      pageSize,
      status: 1,
    };

    this.setState({ pageIndex, pageSize }, () => {
      this.fetchAction('fetchLogistics', new_searchValues);
    });
  }

  fetchAction = (typeName: string, payload = {}) => {
    const { dispatch } = this.props;
    dispatch({
      type: `expressInfoList/${typeName}`,
      payload,
    });
  }

  render() {
    const { pageIndex, pageSize, selectedRowKeys } = this.state;
    const {
      visible,
      form: { getFieldDecorator },
      setExpress,
      loading,
    } = this.props;

    const dataSource = setExpress.list || [];
    const pagination: object = {
      total: setExpress.count,
      current: pageIndex,
      pageSize,
      showQuickJumper: true,
      showSizeChanger: true,
      pageSizeOptions: ['5', '10'],
      onChange: this.onSelectChange,
      onShowSizeChange: this.onSelectChange,
    };

    const rowSelection = {
      selectedRowKeys,
      onChange: this.handleSelectTableItem,
    };

    return (
      <Modal
        title="添加"
        visible={visible}
        width={800}
        destroyOnClose
        okText="添加"
        onOk={this.handleSubmit}
        onCancel={this.handleCencel}
      >
        <Form className="tableListForm" onSubmit={this.handleSearch}>
          <Row>
            <Col md={8} sm={24}>
              <Form.Item label="快递公司" colon={false}>
                {getFieldDecorator('name')(<Input allowClear placeholder="输入名称查询" />)}
              </Form.Item>
            </Col>
            <Col md={4} sm={24} className="paddingL20">
              <Button type="primary" htmlType="submit">查询</Button>
            </Col>
          </Row>
        </Form>
        <Table
          rowKey="id"
          className="tableList statementTable marginT16"
          rowSelection={rowSelection}
          columns={this.columns}
          dataSource={dataSource}
          pagination={pagination}
          loading={loading}
        />
      </Modal>
    );
  }
}

export default Form.create<SaveLogisticsProps>()(SaveLogisticsElem);
